<template>
	<view class="pk">
		<!-- pk转盘 -->
		<view class="turntableBox">
			<!-- 名字 -->
			<view class="name">
				<image :src="image + 'assets/web_img/PK.png'" mode=""></image>
			</view>
			<!-- 转盘 -->
			<view class="turntable">
				<!-- 背景 -->
				<image class="bjImage" :src="image+'assets/web_img/pk3.png'" mode=""></image>
				<!-- 按钮 -->
				<view class="anImage">
					<view class="imageBox" :style="[{transform:'rotate('+trasn+'deg'+')'}]">
						<image class="yuan" src="/static/pk/go.png" mode=""></image>
						<image class="jian" :src="image+'assets/web_img/jian.png'" mode=""></image>
					</view>
					<!-- <image src="/static/pk/an.png" mode="" ></image> -->
				</view>
				<!-- 店铺 -->
				<view class="textName shop">{{pageData.sponsor.sponsor_name}}</view>
				<!-- 会员 --> 
				<!-- 发起人 -->
				<view class="textName name">{{pageData.user.name}}</view>
				<!-- 会员或非会员 -->
				<!-- 受邀人 -->
				<view class="textName anotherName">{{pageData.recipient.name}}</view>
				<!-- 游戏说明 -->
				<view class="explain flex-r-c-c">
					<view class="text" @tap.stop="goAgreement">游戏说明</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 加入人员 -->
		<view class="personnel flex-r-a-c" v-if="isS">
			<!-- 店铺 -->
			<view class="list">
				<image :src="pageData.sponsor.sponsor_logo" mode=""></image>
				<view class="name">{{pageData.sponsor.sponsor_name}}</view>
			</view>
			<!-- 发起人 -->
			<view class="list border">
				<image :src="pageData.user.logo" mode=""></image>
				<view class="name" >{{pageData.user.name}}</view>
			</view>
			<!-- 受邀人 -->
			<view class="list border">
				<image :src="pageData.recipient.logo" mode=""></image>
				<view class="name">{{pageData.recipient.name}}</view>
			</view>
		</view>
		
		<!-- 结果 -->
		<view class="resPicture" v-if="pageData.status == 3">
			<image class="bjImage"  :src="image+'assets/web_img/res.png'" mode=""></image>
			<image class="textImage" v-if="type==3" :src="image+'assets/web_img/buy.png'" mode=""></image>
			<view class="" v-if="type==2">
				<image class="textImage" :src="image+'assets/web_img/get.png'" mode=""></image>
				<view class="btn" @tap.stop="goShop">去点餐</view>
			</view>
		</view>
		
		<!-- 按钮isBtn -->
		<button class="btn" v-if="pageData.status == 2" @tap.stop="shareClick" open-type="share">邀请好友</button>
		<view class="btn" v-if="pageData.status == 1&&!prize" @tap.stop="clickTurn">开始</view>
		<!-- &&isType == 1 -->
		
		<!-- v-if="pageData.status == 3" -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: null,
				image: this.$base.smallimgUrl,
				random: '',
				trasn: 0,
				prize: 0, // 确定结果
				active_id: '',
				pageData: {},
				loop: null,
				// isBtn: true,
				isClickTurn: true, // 防止多次点击开始
				isType: null,
				share: {},
				loop:'',
				type:'',
				isS:true,
			};
		},
		onLoad(el) {
			this.options = el
			this.packageInit(el)
		},
		onShow() {
		},
		onShareAppMessage() {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功',
						icon: "none"
					})
					this.share = {}
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			goShop(){
				uni.switchTab({
					url: '/pages/tabBar/shop/shop'
				})
			},
			packageInit(el){
				const user = uni.getStorageSync('userInfo')
				if(el.beInvitedOrderid && user.nickname != el.username && user.avatar != el.avatar){
					uni.setStorageSync('beInvited',2)
					this.active_id = el.beInvitedOrderid
					this.isType = 2
				} else {
					this.active_id = el.active_id || el.beInvitedOrderid
					this.isType = 1
				}
				if(this.isType == 2) {
					this.getBeInvitedActive()
				}else{
					this.getActiveData()
				}
			},
			// 点击确定，发给好友
			shareClick(){
				const user = uni.getStorageSync('userInfo')
				this.share = {
					title: '',
					path: `/pages/pk/pk?beInvitedOrderid=${this.active_id}&username=${user.nickname}&avatar=${user.avatar}`,
					imageUrl: '',
					desc: '',
					content: '',
				}
			},
			
			// 受邀人点击加入
			getBeInvitedActive(){
				let that = this
				that.$api.pkIntoyq({
					active_id: that.active_id
				}).then(res => {
					// console.log(res,'sssssssss')
					if(res.data.msg == 'pk人已经满了'){
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						that.isS = false
					}
					that.getActiveData()
				})
				
			},
			
			// 获取活动信息
			getActiveData(){
				let that = this
				that.$api.pkInfo({
					active_id: that.active_id
				}).then(res => {
					that.pageData = res.data.data
					that.prize =  that.pageData.game_result
					if(that.pageData.game_result != null){
						clearTimeout(that.loop)
						if(new Date(that.pageData.end_time.replace(/-/g,'/')).getTime() + 30000 > new Date().getTime()){
							that.isClickTurn = false
							let num = 0
							that.random = Math.floor(Math.random() * 360)
							that.trasn = 0
							let time = setInterval(function() {
								that.trasn = that.trasn + 4.2
								if (360 <= that.trasn) {
									that.trasn = 0
									num = num + 1
								}
								if (num == 5) {
									that.currinl()
									clearInterval(time)
								}
							}, 12)
						}else{
							that.getJump()
						}	
					}
					
					that.loop = setTimeout(() => {
						if(that.pageData.status != 1 ||  that.pageData.game_result == null) this.getActiveData()
					},3000)
				})
			},
			
			// 立即抽奖
			clickTurn(e) {
				let that = this
				if(!that.isClickTurn) return that.$utils.toast('请勿多次点击开始')
				that.isClickTurn = false
				that.$api.pkStart({
					active_id: that.active_id
				}).then(res => {
					that.prize = res.data.data
					clearTimeout(that.loop)
					let num = 0
					that.random = Math.floor(Math.random() * 360)
					that.trasn = 0
					let time = setInterval(function() {
						that.trasn = that.trasn + 5
						if (360 <= that.trasn) {
							that.trasn = 0
							num = num + 1
						}
						if (num == 5) {
							// if(that.isType != 2){
								that.currinl()
								clearInterval(time)
							// }
						}
					}, 12)
				})
			},
			// 指针转动
			currinl(e) {
				let that = this
				let name = ''
				let random = '' 
				if(that.prize == 3){
					random = that.getRandomIntInclusive(5,58)
				} else if(that.prize == 1){
					random = that.getRandomIntInclusive(70,190)
				} else {
					random = that.getRandomIntInclusive(210,350)
				}
				
				let b = setInterval(function() {
					that.trasn = that.trasn + 2
					if (random <= that.trasn) {
						clearInterval(b)
						that.getJump()
					}
				that.isClickTurn = true
				}, 10)
			},
			getRandomIntInclusive(min, max){
				min = Math.ceil(min);
				max = Math.floor(max);
				return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
			},
			
			// 跳转协议
			goAgreement(){
				uni.navigateTo({
					url: '/pages/my/agreement/agreement?type=5'
				})
			},
			
			// 跳转显示
			getJump(){
				this.pageData.status = 3
				let that = this
				// 判断当前是谁输
				switch(Number(that.prize)){
					case 3: // 代表的是  店铺
						that.type = 2
						break;
					case 2: // 发起人
						that.isType == 1 ? that.type = 3 : that.type = 2
						break;
					case 1:
						that.isType == 1 ? that.type = 2 : that.type = 3
						break;
				}
				
				// uni.navigateTo({
				// 	url: `/pages/my/imagePage/imagePage?type=${that.type}&isType= ${that.isType}`
				// })
				
			}
			
		},
		
		onUnload() {
			if(this.loop){
				clearInterval(this.loop)
				this.loop = null
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f9f9f9;
		// position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
	.resPicture{
		width: 90%;
		height: 800rpx;
		margin: 40rpx auto;
		background: #fff;
		padding: 30rpx 120rpx;
		border-radius: 20rpx;
		.bjImage{
			width: 104%;
			height: 60%;
		}
		.textImage{
			width: 124%;
			height: 90rpx;
			margin-left: -50rpx;	
		}
	}
	.pk {
		width: 100vw;

		.turntableBox {
			width: 90%;
			margin: 40rpx auto;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.name {
				width: 100%;
				text-align: center;

				image {
					width: 344rpx;
					height: 72rpx;
				}
			}

			.turntable {
				width: 100%;
				text-align: center;
				position: relative;
				
				.textName{
					font-size: 24rpx;
					font-weight: 400;
					overflow:hidden; 
					text-overflow:ellipsis; 
					white-space:nowrap;
					width: 150rpx !important;
					margin-left: 10rpx;
				}
				
				.shop{
					width: auto;
					position: absolute;
					top: 160rpx;
					right: 160rpx;
				}
				
				.name{
					width: auto;
					position: absolute;
					top: 270rpx;
					left: 70rpx;
				}
				
				.anotherName{
					width: auto;
					position: absolute;
					right: 120rpx;
					bottom: 200rpx;
				}
				
				.explain{
					position: absolute;
					right: 0rpx;
					bottom: 0rpx;
					.text{
						font-size: 28rpx;
						font-weight: 400;
						margin-right: 6rpx;
					}
				}

				.bjImage {
					width: 600rpx;
					height: 600rpx;
				}

				.anImage {
					width: 150rpx;
					height: 200rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					
					.imageBox{
						width: 150rpx;
						height: 150rpx;
						position: relative;
						
						.yuan{
							width: 100%;
							height: 100%;
						}
						.jian{
							width: 34rpx;
							height: 70rpx;
							position: absolute;
							left: 50%;
							top: -40rpx;
							z-index: -1;
							transform: translateX(-50%);
						}
					}
					
				}
			}
		}
		
		
		.personnel{
			width: 90%;
			margin: 20rpx auto;
			background: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			.list{
				width: 30%;
				text-align: center;
				position: relative;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.name{
					font-size: 28rpx;
					font-weight: 400;
					margin-top: 10rpx;
					margin-left: 10rpx;
					overflow:hidden; 
					text-overflow:ellipsis; 
					white-space:nowrap; 
				}
				
			}
			.list.border::after{
				content: '';
				width: 2rpx;
				height: 100rpx;
				background-color: #EFEFEF;
				position: absolute;
				left: 0rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			
		}
		
		.btn{
			width: 90%;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 96rpx;
			text-align: center;
			background-color: #000;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			margin: 0 auto;
			margin-top: 40rpx;
		}
		
		
	}
</style>
